<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  const string = 'abcdefghigklmnopqrstuvwxyz'

  console.log(string.slice(1))

  const html = `
  <div>
    <header>
      <nav>
        <li><a href="http://ssss.com">star</a></li>
        <li><a href="http://ssss.com">star</a></li>
      </nav>
    </header>
    <main>
      <section>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </section>
      <article>
        <div>some</div>
      </article>
    </main>
    <footer>
      footer
    </footer>
  </div>
  `

  const dom = {}
  const __tags = {}
  const track = []

  function findTagName (str) {
    return str.match(/[a-zA-Z]+/)[0]
  }
  // <[a-zA-Z]+.*?>([\s\S]*?)<\/[a-zA-Z]*?>

  // substring.search(/[a-zA-Z]+/) => index
  // substring.match(/[a-zA-Z]+/) => ['div', index: 1, input: '<div>', groups: undefined]
  // /[a-zA-Z]+/.exec(substring) => ['div', index: 1, input: '<div>', groups: undefined]
  html.replace(/<[^>]+>/gim, (substring, b) => {
    const tag = findTagName(substring)

    if (!__tags[tag]) {
      __tags[tag] = []
    }

    console.log(__tags[tag], __tags, tag)

    if (substring.startsWith('</') || substring.endsWith('/>')) {

      while (__tags[tag]) {
        const child = track.pop()

        if (child === tag) {
          dom[tag] = __tags[tag]
          delete __tags[tag]
        } else {
          const index = __tags[tag].length - 1

          __tags[tag][index].children.push(__tags[child])
          delete __tags[child]
        }
      }
    } else {
      track.push(tag)
      __tags[tag].push({
        value: substring,
        children: []
      })
    }

    return substring
  })

  console.log(dom)

  /*html.replace(/<[a-zA-Z]+.*?>([\s\S]*?)<\/[a-zA-Z]*?>/, (a, b) => {
    console.log(a, b)
    return a
  })*/
</script>
</body>
</html>
